<template>
	<div>
		<div class="container">
			<div class="handle-box">
                <el-input v-model="searchMsg" placeholder="搜索" class="handle-input mr10" @blur="handleSearch"></el-input>
				<!-- <el-button color="#1c84c0" :icon="Search" @click="handleSearch">查询</el-button> -->
                <el-row class="top-btn">
                    
                    <!-- <el-button color="#01b394"  @click="handleSearch">全部 color="#01b394" -->
                    <el-select v-model="select01"  :suffix-icon="CaretBottom" 
                    style="width: 75px; color:#01b394;"
                    @change="handleSelect"
                    placeholder="全部"
                    >
                      <el-option label="全部" value="0"></el-option>
                      <el-option label="我" value="1"></el-option>
                    </el-select>
                    <el-button color="#1c84c6"  @click="handleUploads">上传</el-button>
                    <el-button color="#1c84c6"  @click="addFolder">添加文件夹</el-button>
                </el-row>
			</div>
			<el-table 
            ref="multipleTableRef" 
			:header-cell-style="{color:'#2A62BC'}"
			 :data="tableData"  
			  style="width: 100%;" 
			  height="380" 
			  size="small"
              border 
              stripe 
			highlight-current-row
			:tree-props="{
				children: 'children',
				hasChildren: 'hasChildren',
			}"
				row-key="id"
				@row-click="onRowClick"
			 >
                <!-- <el-table-column   type="selection" width="35" align="center"  /> -->
               
				<el-table-column label="视频信息">
                    <template #default="scope">
                        
                        <i class="iconfont icon-24gf-folderOpen" v-if="scope.row.isDir"></i>
                        <i class="iconfont icon-video1 blue" v-else></i>
                        {{ scope.row.videoMsg }}
                    </template>
                </el-table-column>
                <el-table-column prop="times" label="课时" align="center" ></el-table-column>
                <el-table-column prop="origin" label="来源" align="center" ></el-table-column>
                <el-table-column prop="status" label="状态" align="center" ></el-table-column>
				<el-table-column label="操作" width="220" align="center" >
					<template #default="scope">
                        <el-row class="right-btn" v-if="scope.row.isDir">
                            <el-tooltip content="上传" placement="top" effect="light" >
                                <el-button text  @click="handleUpload(scope.row)" ><i class="iconfont icon-upload-btn" ></i></el-button>
                            </el-tooltip>
                            <el-tooltip content="修改" placement="top" effect="light" >
                                <el-button text :icon="Edit"  @click="open(scope.$index,scope.row)"></el-button>
                            </el-tooltip> 
                            <el-tooltip content="添加子文件夹" placement="top" effect="light" >
                                <el-button text :icon="FolderAdd"  @click="addSubFolder(scope.row)"></el-button>
                            </el-tooltip> 
					</el-row>
                        <el-row class="right-btn" v-else>
                            <el-tooltip content="修改" placement="top" effect="light" >
                                <el-button text :icon="Edit"  @click="open(scope.$index,scope.row)" ></el-button>
                            </el-tooltip> 
                            <el-tooltip content="删除" placement="top" effect="light" >
                                <el-button text :icon="Delete"  @click="handleDelete(scope.$index)" ></el-button>
                            </el-tooltip> 
					  
					</el-row>
					</template>
				</el-table-column>
			</el-table>
			<div class="pagination">
				<el-pagination
				    :current-page="query.pageIndex"
					:page-size="query.pageSize"
					:page-sizes="[5, 10, 15, 20]"
					size="small"
					layout="total, sizes, prev, pager, next, jumper"
					:total="pageTotal"
					@size-change="handleSizeChange"
					@current-change="handlePageChange"/>
			</div>
		</div>

		<!-- 修改或添加弹出框 -->
		<el-dialog :title="titleEdit" v-model="editVisible" width="30%" >
			<el-form label-width="70px">
				<el-form-item label="文件名">
					<el-input v-model="form.videoMsg"></el-input>
				</el-form-item>
                <el-form-item label="文件大小">
					<el-input v-model="form.sizes"  disabled></el-input>
				</el-form-item>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="editVisible = false">关闭</el-button>
					<el-button color="#0ab394" @click="saveEdit">保存</el-button>
				</span>
			</template>
		</el-dialog>

		<!-- 表头中上传的弹出框 -->
		<el-dialog :title="titleUplod" v-model="uploadVisible" width="30%" >
            <div class="div_upload">
            <el-upload
                class="upload-demo1"
                drag
                action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                multiple
            >
                <el-icon class="el-icon--upload"><upload-filled /></el-icon>
                <div class="el-upload__text">
                点击这里 或<em>click to upload</em>
                </div>
            </el-upload>
            </div>
            <div class="div_upload">
            <el-upload
                class="upload-demo2"
                drag
                action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                multiple
            >
                <el-icon class="el-icon--upload"><upload-filled /></el-icon>
                <div class="el-upload__text">
                点击这里 或<em>click to upload</em>
                </div>
            </el-upload>
        </div>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="uploadVisible = false">关闭</el-button>
					<el-button color="#0ab394" @click="saveVideos">保存</el-button>
				</span>
			</template>
		</el-dialog>

    <!-- 表格中的中上传的弹出框 -->
		<el-dialog :title="form.videoMsg" v-model="bodyVisible" width="30%" >
            <el-upload
                class="upload-demo1"
                drag
                action="#"
                multiple
            >
                <el-icon class="el-icon--upload"><upload-filled /></el-icon>
                <div class="el-upload__text">
                点击这里 或<em>click to upload</em>
                </div>
            </el-upload>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="bodyVisible = false">关闭</el-button>
					<el-button color="#0ab394" @click="saveVideos">保存</el-button>
				</span>
			</template>
		</el-dialog>        
	</div>
</template>

<script setup  name="adminList">
import { ref, reactive } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { Delete, Edit,Upload,CaretBottom,FolderAdd} from '@element-plus/icons-vue';
import { getVideos} from '../../api/resource';
//是否启用
const  select01 = ref('全部')
//分页字体
const small = ref(true)
// const size = ref<'default' | 'large' | 'small'>('default')

const  searchMsg  = ref('')
//分页数据
const query = reactive({
	pageIndex: 1,
	pageSize: 5,
});
//

//表格数据
const tableData = ref();
//总页数
const pageTotal = ref(0);
const multipleTableRef = ref()
const state = reactive({
	multipleSelection:[]
})

// 获取表格数据  分页是数据截取  后台结合一起后  直接返回分页的后的数据
const getData = () => {
    getVideos({pageCurrent:query.pageIndex,pageSize:query.pageSize}).then(res=>{
        console.log(res,"---res video---")
        // tableData.value = res.data.
		let start  = (query.pageIndex-1)*query.pageSize;//开始位置
        let end =query.pageIndex*query.pageSize  ;//结束位置 数组的截取的时候 [start,end) suo所以不用-1
        tableData.value = res.data.slice(start,end);
        // tableData.value = res.data;
        pageTotal.value = res.data.length
    })
	
};
getData();
//多选框权限
// const handleSelectionChange = (val) => {
//   state.multipleSelection = val
// }
// 分页导航
const handleSizeChange = (val) => {
  // console.log(`${val} items per page`)
  query.pageSize = val;
  getData()
}
const handlePageChange = (val) => {
	query.pageIndex = val;
	console.log(val,"==")
	console.log(query.pageSize)
	getData()
};
// 选择表格的行菜单ID
const selectedRowMenuId = ref();
function onRowClick(row) {
  selectedRowMenuId.value = row.id;
}


// 删除单个操作
const handleDelete = (index) => {
	// 二次确认删除
	ElMessageBox.confirm('确定要删除吗？', '提示', {
		type: 'warning'
	})
	.then(() => {
		ElMessage.success('删除成功');
		//to.... 传递id 到后台 
		tableData.value.splice(index, 1);
		// 删除成功后
		// getData()
	})
	.catch(() => {});
};
//上传 to......

const titleUplod = ref('上传')
const uploadVisible =ref(false)
const handleUploads =()=>{
    uploadVisible.value = true;
	console.log('上传多个')
	
}
const bodyVisible =ref(false)
const handleUpload =(row)=>{
    form.videoMsg = row.videoMsg
    bodyVisible.value= true
	console.log('上传单个个')
}

const saveVideos = ()=>{
    ElMessage.success("上传需要自己连接服务器")
}

// 查询操作  to... 需要自己实现与后台交互
const handleSearch = () => {
	query.pageIndex = 1;
	getData();
};

const handleSelect=()=>{
  console.log("===全部按钮=",select01.value)
      //一下所有的实现都要重新写 要与服务端交互  to-----  
        if(select01.value=='0'){
            getData()
        
        }else{
            let data=[]
            tableData.value.map(item=>{
                if(item.isDir){
                    data.push(item)
                }
            })
            tableData.value=data
        
        }
}
// 表格编辑时弹窗和保存
const editVisible = ref(false);
let form = reactive({
    videoMsg:'',
    sizes:'800M',
    
});

// 
let titleEdit = ref('修改')
let isDisable = ref(true)
const open  = (index,row)=>{//index是时间源对象
	if(row){
		isDisable.value=true
		titleEdit.value = "修改"
		handleEdit(index,row)
	}else{
		//把第一个输出改为可编辑
		isDisable.value=false
		//清空表单中的数据
		titleEdit.value = "添加";
        form.videoMsg = ''
        form.sizes =''
		editVisible.value = true	
	}
	console.log('-------测试传值-------')
	// console.log(index,row,index.target.innerText)
	// console.log(index,row)
	// console.log('================')

}
let idx = -1;
const handleEdit = (index, row) => {
	idx = index;
    form.videoMsg = row.videoMsg
    // form.sizes =row.sizes
	editVisible.value = true;
};
//保存添加或者修改的数据 to---需要重新实现
const saveEdit = () => {
	editVisible.value = false;
	ElMessage.success(`修改第 ${idx + 1} 行成功`);
	tableData.value[idx].videoMsg = form.videoMsg;
	tableData.value[idx].sizes = form.sizes;
};


//添加文件夹
const addFolder = ()=>{
	 console.log('添加根文件夹 自己实现to....')
}
const addSubFolder = (row)=>{
	 console.log('添加子文件夹 自己实现to....')
}
</script>

<style scoped>
.handle-box {
	margin-bottom: 20px;
     
}

.handle-select {
	width: 120px;
}

.handle-input {
	width: 196px;
}
.table {
	width: 100%;
	font-size: 14px;
}
.red {
	color: #F56C6C;
}
.blue {
	color: #1296e2;
	font-weight: bold;
}
.mr10 {
	margin-right: 10px;
}
.table-td-thumb {
	display: block;
	margin: auto;
	width: 40px;
	height: 40px;
}
.cell{
    display: inline-block;
    .el-button{
        margin-left: 0px;
    }
}

.top-btn{
    float: right;
    .el-button{
        margin-left: 10px;
    }
}
.right-btn{
    justify-content: center;
    .el-button{
		background-color: #f1f1f1;
		width: 30px;
		height: 30px;
		margin-left: 10px;
	}
}
.div_upload{
    display:inline-block;
    width: 48%;
    text-align: center;
    margin-right: 10px;
}

</style>
